<template>
	<view>
		<uni-nav-bar left-icon="back" left-text="返回" fixed="true" statusBar="true"  @clickLeft="leftAction"  :title="clientId+'数据展示'"
			></uni-nav-bar>
		<view>
			
		</view>
		<uni-list>
			<!-- <template v-for="(item,index) in dataArr">
				<uni-list-item  :note="item.time" :rightText="item.value" />
			</template> -->
			<uni-list-item direction="column" v-for="(item,index) in dataArr">
			        <template v-slot:header>
			            <view class="uni-title">采集数值:{{item.value}}</view>
			        </template>
			        <template v-slot:body>
			            <view class="uni-list-box">
			                <view class="uni-content">
								<view class="uni-note">设备类型:{{item.ty}}</view>
			                    <view class="uni-note">电压(BV):{{item.bv}}</view>
								<view class="uni-note">RSSI:{{item.rs}}</view>
								<view class="uni-note">SN:{{item.sn}}</view>
			                </view>
			            </view>
			        </template>
			        <template v-slot:footer>
			            <view class="uni-footer">
							<view class="uni-title-sub uni-ellipsis-2">采集时间:{{item.time}}</view>
						
			                <!-- <text class="uni-footer-text">评论</text>
			                <text class="uni-footer-text">点赞</text>
			                <text class="uni-footer-text">分享</text> -->
			            </view>
			        </template>
			    </uni-list-item>
		</uni-list>	
	</view>
</template>

<script>
	import uniNavBar from '@/uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue'
	import Vue from 'vue'
		
	export default {
		data() {
			return {
				dataArr:[]
			};
		},
		onLoad(options) {
			this.clientId = options.clientId
			var time = this.$moment().format("yyyy-MM-DD HH:mm:ss")+'.000';
			var starttime = this.$moment().subtract(1, 'days').format("yyyy-MM-DD HH:mm:ss")+'.000';

			const params = {
					"key": this.clientId + '_DV.PV',
					"names":[
							this.clientId + '_DV.PV',
							this.clientId + '_BV.PV',
							this.clientId + '_RS.PV',
							this.clientId + '_SN.PV',
							this.clientId + '_TY.PV'
							],
					"starttime":starttime,
					"endtime":time,
					"type":"GetHisDataAll",
					"token":Vue.prototype.token
				}
			this.$http.post('/realhistorian/requestJson',params).then(res => {
				const array = res.data.data.items.reverse()
				this.dataArr = []
				
				for (let i in array) {
					const item = array[i]
					this.dataArr.push({
						value:item[this.clientId + '_DV.PV'].toFixed(2),
						time:item['time'],
						bv:item[this.clientId + '_BV.PV'].toFixed(2),
						rs:item[this.clientId + '_RS.PV'],
						sn:item[this.clientId + '_SN.PV'],
						ty:item[this.clientId + '_TY.PV'] == 1 ? 'PT100' : '压力计',
					})
				}
				console.log(this.dataArr)
			}).catch(err => {
				uni.showModal({
					content: '出错了，请稍后再试',
					showCancel: false
				})
			})
		},
		components: {
			uniNavBar
		},
		methods: {
			leftAction() {
				uni.navigateBack({
					delta: 1
				});
			},
		}
	}
</script>

<style lang="scss">
	@import '@/common/uni-nvue.scss';
	@import '@/common/uni-ui.scss';
	
		page {
			display: flex;
			flex-direction: column;
			box-sizing: border-box;
			background-color: #efeff4;
			min-height: 100%;
			height: auto;
		}
	
		.tips {
			color: #67c23a;
			font-size: 14px;
			line-height: 40px;
			text-align: center;
			background-color: #f0f9eb;
			height: 0;
			opacity: 0;
			transform: translateY(-100%);
			transition: all 0.3s;
		}
	
		.tips-ani {
			transform: translateY(0);
			height: 40px;
			opacity: 1;
		}
	
		.content {
			width: 100%;
			display: flex;
		}
	
		.list-picture {
			width: 100%;
			height: 145px;
		}
	
		.thumb-image {
			width: 100%;
			height: 100%;
		}
	
		.ellipsis {
			display: flex;
			overflow: hidden;
		}
	
		.uni-ellipsis-1 {
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
	
		.uni-ellipsis-2 {
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			color: #999999;
		}
		.uni-note{
			color: #666666;
		}
</style>
